<{include file="public/header.html"}>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBP5W4f9GW08Ag5kpEX-TAin0_4B8YWe-g&sensor=false"></script>
<script type="text/javascript">
	var map;
	var infowindow;
	var marker;
	
	var geocoder = new google.maps.Geocoder();
		function initialize() {
			var geocoder = new google.maps.Geocoder();
			var myOptions = {
				zoom: 8,
				mapTypeId: google.maps.MapTypeId.ROADMAP
		   };
		   //assign map to div
		   map = new google.maps.Map(document.getElementById("map-search"),
		       myOptions);
		 	// Try HTML5 geolocation
			if(navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(function(position) {
		        var pos = new google.maps.LatLng(position.coords.latitude,
		                                         position.coords.longitude);
		
		        map.setCenter(pos);
		      },function() {
		    	  handleNoGeolocation(true);
		      });
		    }else {
		    	// Browser doesn't support Geolocation
		    	handleNoGeolocation(false);
		    }
		 	//load marker
			setMarkers(map);
			
		}//end init
		
		function handleNoGeolocation(errorFlag) {
		  if (errorFlag) {
		    var content = 'Error: The Geolocation service failed.';
		  } else {
		    var content = 'Error: Your browser doesn\'t support geolocation.';
		  }
		
		  var options = {
		    map: map,
		    position: new google.maps.LatLng(60, 105),
		    content: content
		  };
		
		  var infowindow = new google.maps.InfoWindow(options);
		  map.setCenter(options.position);
		}
		
		function setMarkers(map){
			<{while $marker->fetch()}>
				var myLatLng = new google.maps.LatLng(<{$marker->latitude}>, <{$marker->longitude}>);
				marker = new google.maps.Marker({
					position: myLatLng,
				    map: map
				});
				var content = 'Title : <{$marker->title}><br/>';
				content += 'Category : <{$marker->category_name}><br/>';
				<{if $marker->link}>content += 'Website : <{$marker->link}><br/>';<{/if}>
				content += 'Price/m2 : <{$marker->m2}> USD<br/>';
				content += 'Price/meter : <{$marker->meter}> USD<br/>';
				content += 'Price/spot : <{$marker->spot}> USD<br/>';
				openInfoWindow(marker, content);
			<{/while}>
		}

		function openInfoWindow(marker, content){
			var window = new google.maps.InfoWindow(
				{ content: content,
				  size: new google.maps.Size(50,50)
			});
			google.maps.event.addListener(marker, 'click', function() {
			  window.open(map, marker);
			});
		}
		
		function searchGarage(){
			var address = document.getElementById('address').value;
			
		     geocoder.geocode({'address': address}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
				    if (results[0]) {
				    	var location = results[0].geometry.location;
				    	document.getElementById('lat').value = location.lat();
				    	document.getElementById('lng').value = location.lng();
				    	document.search_garage.submit();
				    }
				    	
				} else {
					  alert("Geocoder failed due to: " + status);
				}
			});
		     return false;
		}
		
	      
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<link href="<{$smarty.const.STATIC_COMPONENT_URL}>css/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery-1.7.1.js"></script>
<script src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery.ui.core.js"></script>
<script src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery.ui.widget.js"></script>
<script src="<{$smarty.const.STATIC_COMPONENT_URL}>js/jquery.ui.tabs.js"></script>
<script type="text/javascript">
	$(function() {
		$( "#tabs" ).tabs();
	});
</script>

<div class="container">
    	<h2>Input for searching</h2>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">Location</a></li>
                <li><a href="#tabs-2">Category</a></li>
            </ul>
            <div id="tabs-1">
            	<div class="kilometer">
                	<form action="" method="post" name="search_garage" >
                		<input type="hidden" name="category" id="category" value="<{$category_id}>" />
                		<input type="hidden" name="lat" id="lat" value="" />
                		<input type="hidden" name="lng" id="lng" value="" />
                		<input type="hidden" name="act" value="1" />
                		<label>Location : </label>
                		<input type="text" name="address" id="address" size="20" />
                		<label>Radius : </label>
                		<input type="text" name="radius" id="radius" size=10"" /><label>km<sup>2</sup></label>
                		<a onclick="searchGarage();" ><img src="<{$smarty.const.STATIC_COMPONENT_URL}>images/btnFind.jpg" /></a>
                	</form>
                </div>
                <div id="map-search" style="width:750px; height: 500px" ></div>
            </div>
            <div id="tabs-2" style="position: relative;">
                <div class="garage-list">
                <{if $garage->N}>
					<table border="1" cellpadding="0" cellspacing="0" width="100%" bgcolor="#d4ffd4">
						<tr class="title">	
							<td width="80">Title</td>
							<td width="80">Category</td>
							<td width="300">Place</td>
							<td width="100">Price/m2</td>
							<td width="100">Price/meter</td>
							<td width="100">Price/spot</td>
						</tr>
						<{while $garage->fetch()}>
						<tr>	
							<td><span><a href="<{$smarty.const.APPLICATION_URL}>/garage/view/id/<{$garage->id}>"><b><{$garage->title}></b></a></span></td>
							<td><span><{$garage->category_name}></span></td>
							<td><span><{$garage->address}></span></td>
							<td><span><{$garage->m2}></span></td>
							<td><span><{$garage->meter}></span></td>
							<td><span class="last"><{$garage->spot}></span></td>
						</tr>
						<{/while}>
					</table>
				<{else}>
					<div class="garage-empty" style="width:730px;" >There aren't garage which you find. Please try again.</div>
				<{/if}>
	             </div>
	             <div align="center" class="pagination">
					<{include file='pager.html' data=$garage->getPaginationData() url_base=$url_base}>
				</div>
            </div>
       </div>
    </div><!--end container-->
    <div class="clear"></div>
<{include file="public/footer.html"}>